<!--新闻查看组件-->
<template>
  <el-container>
    <el-main>
      <div class="top"><h1>新闻信息查阅</h1></div>
      <div class="news">
        <el-form ref="editFormRef" :model="editForm" :rules="editFromRules" label-width="100px">
          <el-form-item label="标题:">
            <el-input v-model="editForm.title" />
          </el-form-item>
          <el-form-item label="发布时间:">
            <el-input v-model="editForm.releaseTime" />
          </el-form-item>
          <el-form-item label="简介:">
            <el-input v-model="editForm.summary" />
          </el-form-item>
           <el-form-item label="关键字:">
            <el-input v-model="editForm.keyword " />
          </el-form-item>
          <el-form-item label="封面图片:">
            <div class="picture"><img :src="this.editForm.picture" alt=""></div>
          </el-form-item>
        </el-form>
      </div>
      <el-form label-width="100px">
        <el-form-item label="内容:" style="margin-bottom:0px;"></el-form-item>
      </el-form>
      <div id="editor"></div>
    </el-main>
  </el-container>
</template>

<script>
import E from 'wangeditor'
export default {
  name:'seeNews',
  data() {
    return {
      // 查询到的用户信息对象
      editForm: {},
      // 修改表单的验证规则对象
      editFromRules:{
                title: [
                    { required: true, message: "请输入标题信息", trigger: "blur" }
                ],
               releaseTime: [
                    { required: true, message: "请输入发布时间", trigger: "blur" }
                ]
      },
      editor: '',
      allData:{
        id: null
      }
    }
  },
  methods: {
    async getData() {
      const that = this
      this.allData = that.$route.params.info
      const {data: resp} = await this.$http.get('news/' + this.allData.id)
    },
    submitPicture(e) {
      let self = this;
      let file = e.target.files[0];
      let param = new FormData(); // 创建form对象
      param.append('myfiles', file); // 通过append向form对象添加数据
      // console.log(param.get('myfiles')); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' },
      };
      // 添加请求头
      this.$axios
        .post('http://sword.ink:2335/upload/picture', param, config)
        .then((res) => {
          if (res.data.errno === 0) {
            console.log(res);
            this.editForm.picture = res.data.data[0];
            console.log(this.editForm.picture);
          }
        })
    }
  },
    mounted() {
    this.getData()
    var that = this
    this.$http.get('news/' + this.allData.id).then(({data: res}) => {
                this.editForm = res.data[0]
                console.log(this.editForm)
                this.editor.txt.html(this.editForm.content)      
        })
      this.editor = new E('#editor') //new即可 //change事件，当富文本编辑器内容发生变化时便会触发此函数
      this.editor.customConfig.onchange = function (text) {
        /* that.editForm.content = text */
      }
      //以上配置完成之后调用其create()方法进行创建
      this.editor.customConfig.uploadImgServer =
        'http://dl.sword.ink:2334/upload/picture' 
      //必要设置，值必须为“myfiles”
      this.editor.customConfig.uploadFileName = 'myfiles' 
      // 图片最大体积为20MB
      this.editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024 
      //超时时间要设置长一点，否则大图片上传可能失败，默认为10秒，这里设置为30秒
      this.editor.customConfig.uploadImgTimeout = 30000
      this.editor.create() 
      //创建完成之后的默认内容
  },
}
</script>

<style scoped>
.el-container {
  height: 100%;
  /* overflow-x: hidden;
  overflow-y: hidden; */
}
.el-main{
  overflow: scroll;
}
::-webkit-scrollbar {display:none}
.top{
  width: 100%;
  height: auto;
  text-align: center;
}
.top h1{
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 25px;
  font-family: '宋体';
}
.el-header {
  height: 500px;
}
.news {
  height: auto;
  width: 100%;
}
.text {
  width: 100%;
  height: 50vh;
  border: 2px solid aqua;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.picture img{
  width: 50vh;
}
</style>
